<template>
    <u-navbar title="待支付" is-back="true" title-color="black" />
    <view class="order-detail-container">
        <!-- 订单状态 -->

        <!-- 线路信息 -->
        <view class="line-info">
            <image :src="lineImage" class="line-image" />
            <view class="line-details">
                <text class="line-name">{{ options.lineName }}</text>
                <view class="time-slot">
                    <text>出发日期：{{ options.departureDate }}</text>
                    <text
                        >出行人数：成人 {{ options.adultCount }} / 儿童
                        {{ options.childCount }}
                    </text>
                </view>
                <text class="price">¥{{ options.totalPrice }}</text>
                <view class="payment">
                    <button @click="goToPayment" class="pay_btn">去付款</button>
                </view>
            </view>
        </view>

        <!-- 订单信息 -->
        <view class="order-info">
            <view class="info-row">
                <text class="label">下单时间</text>
                <text class="value">{{ options.orderTime }}</text>
            </view>
            <view class="info-row">
                <text class="label">订单编号</text>
                <text class="value">{{ options.orderId }}</text>
            </view>
            <view class="info-row">
                <text class="label">出行时间</text>
                <text class="value">{{ options.departureDate }} {{ options.timeSlot }}</text>
            </view>
            <view class="info-row">
                <text class="label">行李总数</text>
                <text class="value">{{ options.luggageCount }}</text>
            </view>
        </view>

        <!-- 支付按钮 -->
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import UNavbar from '@/uni_modules/vk-uview-ui/components/u-navbar/u-navbar.vue'

const options = ref({
    orderId: '20250520152713',
    orderTime: '2023-10-15 12:00:00',
    lineName: '精致小团纯玩自费昆明大理丽江6日',
    departureDate: '2023-10-20',
    timeSlot: '08:00-10:00',
    adultCount: 2,
    childCount: 1,
    totalPrice: 2690,
    luggageCount: 2
})

const lineImage = ref('../../static/images/line_image.png') // 替换为真实线路图 URL

// onLoad((query) => {
//     options.value = query
// })
</script>

<style lang="scss" scoped>
.order-detail-container {
    padding: 20rpx;
    background-color: #f5f5f5;
}

//.status-bar {
//    font-size: 32rpx;
//    color: #f6a22d;
//    margin-bottom: 30rpx;
//}

.line-info {
    display: flex;
    background-color: #fff;
    padding: 20rpx;
    border-radius: 16rpx;
    margin-bottom: 30rpx;
}

.line-image {
    width: 240rpx;
    height: 240rpx;
    margin-right: 20rpx;
    border-radius: 8rpx;
}

.line-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}

.line-name {
    font-size: 32rpx;
    font-weight: bold;
}

.time-slot {
    display: flex;
    font-size: 24rpx;
    flex-direction: column;
    background-color: #f8f8f8;
    color: #6e7681;
    border-radius: 8rpx;
    line-height: 1.5;
    padding: 15rpx;
    margin-bottom: 15rpx;
}

.order-info {
    background-color: #fff;
    padding: 20rpx;
    border-radius: 16rpx;
    display: flex;
    flex-direction: column;
    gap: 20rpx;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    color: #333;
}

.label {
    color: #666;
    min-width: 140rpx;
}

.value {
    flex: 1;
    text-align: right;
    padding-left: 20rpx;
    color: #333;
}

.payment {
    padding: 20rpx;
    background-color: #fff;
    display: flex;
    justify-content: flex-end;
}

.price {
    font-size: 36rpx;
    font-weight: bold;
    color: #f6a22d;
}

.pay_btn {
    border-radius: 60rpx;
    background-color: #fef1e0;
    color: #f6a22d;
    width: 220rpx;
    margin: 0;
}
</style>
